<template>
    <div class="body">
        <div class="crat-list">
            <van-checkbox-group v-model="result" ref="checkboxGroup" @change="selectGoods">
                <van-swipe-cell v-for="(item,index) of cartList" :key="index">
                    <div class="goods-cart">
                        <!-- <van-checkbox-group v-model="result" ref="checkboxGroup"> -->
                            <van-checkbox :name="item.cart_id" checked-color="#3DCEB9"></van-checkbox>
                        <!-- </van-checkbox-group> -->
                        <van-card
                        :desc="item.goods_info"
                        :title="item.goods_name"
                        class="goods-card"
                        :thumb="item.image"
                        >
                            <template #price>
                                <span class="price">￥{{getPrice(item)}}</span>
                                <span class="spec">/{{item.unit_name}}</span>
                            </template>
                            <template #footer>
                                <van-stepper v-model="item.num"  min="0" @change="onChangeNum(item)" theme="round" button-size="20"/>
                            </template>
                        </van-card>
                    </div>
                    <!-- <template #right>
                        <van-button @click="delCart(item.cart_id)" square text="删除" type="danger" class="delete-button" />
                    </template> -->
                </van-swipe-cell>
            </van-checkbox-group>
        </div>
        <van-submit-bar :price="allPrice" button-text="去结算" @submit="onSubmit" :disabled="!result.length">
            <van-checkbox v-model="checked" @change="checkAll" checked-color="#3DCEB9">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>
<script>
import {CartList,NumCart,editCart} from '../ajax'
import {Toast} from 'vant'
export default {
    data() {
        return {
            cartList:[],
            checked:false,
            result:[],
            allPrice:0
        }
    },
    mounted(){
        this.getCartList();
    },
    beforeDestroy() {
        if(this.$store.getters.local_cart.length){
            const data = {
              goods:JSON.stringify(this.$store.getters.local_cart),
              uid:this.$store.getters.wxUserInfo.id,
              group_id:this.$store.getters.wxUserInfo.group_id,
              role_type:this.$store.getters.wxUserInfo.role_type,
            }
            editCart(data).then(res=>{
                console.log(res);
                this.$store.commit('del_cart');
            })
          }
    },
    methods:{
        getPrice(item){
            return this.$store.getters.wxUserInfo.is_believe && item.is_activity?item.act_price:this.$store.getters.wxUserInfo.is_believe?item.price:item.ot_price
        },
        onChangeNum(item){
            console.log(item);
            this.$store.commit('edit_cart',{item,cate_id:item.cate_id});
            // if(type == 2 && item.num == 1){
            //     this.delCart(item.cart_id);
            //     return;
            // }
            // const data = {
            //     type,
            //     uid:this.$store.getters.wxUserInfo.id,
            //     goods_id:item.goods_id,
            //     id:item.cart_id,
            //     admin_id:this.$store.getters.admin_id
            // }
            // NumCart(data).then(res=>{
            //     Toast('添加成功');
            //     this.getCartList();
            // })
        },
        checkAll(e){
            if(e){
                this.$refs.checkboxGroup.toggleAll(true);
            }else{
                this.$refs.checkboxGroup.toggleAll();
            }
        },
        getCartList(){

            const data = {
                group_id:this.$store.getters.wxUserInfo.group_id,
                admin_id:this.$store.getters.admin_id
            }
            CartList(data).then(res=>{
                // console.log(res);
                this.cartList = res;
            }).catch(()=>{
                this.cartList = [];
            })
        },
        selectGoods(checkList){
            this.allPrice = 0;
            // console.log(checkList);
            this.$store.commit('add_cart_list',{checkList,cartList:this.cartList});
            for(let i of this.cartList){
                for(let a of checkList){
                    if(i.cart_id == a){
                        this.allPrice+=parseFloat(this.getPrice(i))*i.num*100;
                    }
                }
            } 
        },
        onSubmit(){
            this.$router.push('/creatOrder');
        }
    }
}
</script>
<style lang="scss" scoped>
    $white:#fff;
    $green:#3DCEB9;
    $red:#ee0a24;
    .body{
        .crat-list{
            height: calc(100vh - 6rem);
            overflow: auto;
        }
        .goods-card {
            margin: 0;
            background-color: $white;
            width: 80%;
            .price{
                font-size: 1rem;
            }
            .spec{
                color: #9b9b9b;
                font-weight: 500;
            }
            >>> .van-stepper__minus, >>>.van-stepper__plus{
                border-radius: 50%;
                color: $white;
                background: $white;
            }
            >>> .van-stepper__minus{
                border:0.04rem solid $green;
                color:#333
            }
            >>> .van-stepper__plus{
                background: $green;
            }
            >>> .van-stepper__input{
                background: #fff;
            }
        }
        .delete-button {
            height: 100%;
            background: $red !important;
        }
        .goods-cart{
            display: flex;
            align-items: center;
            padding: 0.2rem 0.4rem;
            background: $white;
        }
        .van-card__footer{
            width: 5rem;
            position: absolute;
            top: 4.5rem;
            left: 16rem;
            display: flex;
            align-items: center;
            font-size: 1rem;
            .iconfont {
                font-size: 1.5rem;
                color: $green;
            }
            p{
                width: 4rem;
                text-align: center;
            }
        }
        .van-button--danger{
            background: $green;
        }
    }
</style>